import React from "react";
import SplitPane from 'react-split-pane'
import {renderItems, VJsonComponent, VJsonComponentBase} from "../factory";
import _ from 'lodash'
import {toJS} from "mobx";
import {apply} from "..";

export interface SpliterVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean

    /**
     * 是否允许拖动
     */
    allowResize?: boolean

    /**
     * 拖动方向
     */
    split: 'vertical' | 'horizontal'

    primary?: 'first' | 'second'

    minSize?: number | string

    maxSize?: number | string

    defaultSize?: number | string

    style?: React.CSSProperties

    items: any[]
}

export interface SpliterState {
    style?: React.CSSProperties
    defaultSize?: number | string
}

@VJsonComponent({
    view: 'spliter'
})
export default class Spliter extends VJsonComponentBase<SpliterVJsonProp, SpliterState> {
    static defaultProps = {
        visible: true,
        allowResize: true,
        split: 'vertical',
        items: []
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Spliter.defaultProps
        )

        this.state = {
            ...this.state,
            defaultSize: props.vjson.defaultSize,
            style: toJS(props.vjson.style)
        }
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }

        const style: any = {
            height: 'auto',
            position: 'relative',
            ...this.state.style
        }

        return (
            // @ts-ignore
            <SplitPane key={this.key} view_id={this.key} aria-roledescription={this.view}
                       style={apply(this, style)}
                       allowResize={apply(this, this.props.vjson.allowResize)}
                       split={apply(this, this.props.vjson.split)}
                       primary={apply(this, this.props.vjson.primary)}
                       minSize={apply(this, this.props.vjson.minSize)}
                       maxSize={apply(this, this.props.vjson.maxSize)}
                       // defaultSize={apply(this, this.props.vjson.defaultSize)}
                       defaultSize={this.state.defaultSize}
            >
                {
                    ...renderItems(this, this.props.vjson.items)
                }
            </SplitPane>
        )
    }
}
